<template>
	<view>
		<!-- 商品列表 -->
		<view class="goods-list">
			<view class="product-list">
				<view class="product" v-for="(goods,index) in goodsList" :key="index" @tap="toGoods(goods.id)">
					<image class="image" :src="wz+goods.img" ></image>
					<view class="name">{{ goods.title }}</view>
					<view class="info">
						<view class="price">{{ goods.price }}</view>
						<view class="slogan">出售 {{ goods.salesnum }}件</view>
						
					</view>
				</view>
				<text  style="text-align: center; color:#FFFFFF;">到底了,亲~</text>
			</view>
			<view class="loading-text">{{ loadingText }}</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title:'',
			wz:'http://tuiguang.yiyunoto.com',
			goodsList: [],
			loadingText: '正在加载...',
			headerTop: '0px',
			headerPosition: 'fixed',
			orderbyList: [
			],
			orderby: 'sheng'
		};
	},
	onLoad: function(option) {
		//option为object类型，会序列化上个页面传递的参数
		// console.log(option.cid); //打印出上个页面传递的参数。
		console.log(option.data);
		this.title=option.data
		uni.request({
							url:'http://tuiguang.yiyunoto.com/api/index/search',
							header:{authtoken:this.$store.state.token},
							method:'POST',
							data:{title:this.title},
							success:(res)=>{
								console.log("请求成功",res)
								this.goodsList=res.data.data
							},
							fail:(res)=>{
								console.log("请求失败",res)
							}
						})
		//兼容H5下排序栏位置
		// #ifdef H5
		//定时器方式循环获取高度为止，这么写的原因是onLoad中head未必已经渲染出来。
		let Timer = setInterval(() => {
			let uniHead = document.getElementsByTagName('uni-page-head');
			if (uniHead.length > 0) {
				this.headerTop = uniHead[0].offsetHeight + 'px';
				clearInterval(Timer); //清除定时器
				clearInterval(Timer);
				console.log(Timer)
			}
		}, 1);
		// #endif
	},
	onPageScroll(e) {
		//兼容iOS端下拉时顶部漂移
		if (e.scrollTop >= 0) {
			this.headerPosition = 'fixed';
		} else {
			this.headerPosition = 'absolute';
		}
	},
	methods: {
		
		//商品跳转
		toGoods:function(e) {
			console.log("shan",e)
			uni.navigateTo({
					url:"../product/product?id="+e
			});
		},
	}
};
</script>

<style lang="scss">
.icon {
	font-size: 26upx;
}
.header {
	width: 92%;
	padding: 0 4%;
	height: 79upx;
	display: flex;
	justify-content: space-around;
	align-items: flex-end;
	position: fixed;
	top: 0;
	z-index: 10;
	
	background-color: #fff;
	border-bottom: solid 1upx #eee;
	.target {
		width: 20%;
		height: 60upx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28upx;
		margin-bottom: -2upx;
		color: #aaa;
		&.on {
			color: #555;
			border-bottom: 4upx solid #f06c7a;
			font-weight: 600;
			font-size: 30upx;
		}
	}
}
.place {
	background-color: #ffffff;
	height: 140upx;
}
.goods-list {
	background: #999999;
	.loading-text {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 60upx;
		color: #979797;
		font-size: 24upx;
	}
	.product-list {
		width: 92%;
		padding: 4% 4% 3vw 4%;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.product {
			width: 330upx;
			height: 326upx;
			background: rgba(255, 255, 255, 1);
			border-radius: 6upx;
			margin: 0 0 31upx 0;
			box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.1);
		}
	}
}
.image {
	width: 240upx;
	height: 240upx;
	margin-top: 20upx;
	margin-left: 45upx;
}
.name {
	width: 80%;
	font-size: 22upx;
	font-family: Source Han Sans CN;
	color: rgba(38, 43, 63, 1);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin: 0upx auto;
}
.info {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	width: 90%;
}
.price {
	width: 40%;
	color: #e65339;
	font-size: 16upx;
	padding-left: 30upx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.slogan {
	padding-left: 0upx;
	width: 50%;
	color: #807c87;
	font-size: 16upx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
</style>
